<template>
  <input type="text" v-focus>

  <h1 v-if="toggle" v-demo:foo.bar="dVal">{{msg}}</h1>
  <button @click="msg=123">changMsg</button>
  <button @click="toggle=!toggle">toggle</button>
  <button @click="dVal='abc'">修改治理值</button>
</template>
<script setup>
  // 为什么要自定义指令：为了操作底层DOM

import { ref } from 'vue';

  // 以 v 开头的驼峰命名变量 是自定义指令
  // const vFocus = {
  //   mounted:(el,binding,vnode,prevVnode)=>{
  //     el.focus()
  //   }
  // }
  const msg = ref('v-demo指令所在的元素')
  const toggle = ref(true)
  const dVal = ref('指令默认值')
  const VDemo = {
   // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created(el, binding, vnode, prevVnode) {
    // 下面会介绍各个参数的细节
    console.log('created....');
  },
  // 在元素被插入到 DOM 前调用
  beforeMount(el, binding, vnode, prevVnode) {
    console.log('beforeMount....');
  },
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted(el, binding, vnode, prevVnode) {
    console.log('mounted....',binding);
  },
  // 绑定元素的父组件更新前调用
  beforeUpdate(el, binding, vnode, prevVnode) {
    console.log('beforeUpdate....');
  },
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated(el, binding, vnode, prevVnode) {
    console.log('updated....',binding);
    console.log('vnode....',vnode);
  },
  // 绑定元素的父组件卸载前调用
  beforeUnmount(el, binding, vnode, prevVnode) {
    console.log('beforeUnmount....');
  },
  // 绑定元素的父组件卸载后调用
  unmounted(el, binding, vnode, prevVnode) {
    console.log('unmounted....');
  }
  }
</script>